<template>
	<view>
		<view class="bg">
		</view>
		<view class="nav">
			<navigator class="item" v-for="(item,index) in nav" :key="index"
			:url="item.url"
			open-type="redirectTo">
				<view class="text" @click="changeIndex(index)" :class="[currentIndex==index?'yellow':'text']">
					{{item.text}}
				</view>
				<view class="bottom" v-if="currentIndex==index">
				</view>
			</navigator>
		</view>
		<view class="search">
			<view class="search_wrapper">
				<view class="image">
					<image src="../../../static/image/sousuotianchong@2x(3).png" mode=""></image>
				</view>
				<view class="input">
					<u-input v-model="keyWord" 
					placeholder="请输入想要搜索的关键字"
					height="30"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav:[{
					text:"包裹预报",
					url:"/pages/inemployees/inforecast/inforecast"
				},{
					text:"未入库",
					url:"/pages/inemployees/waitTohouse/waitTohouse"
				},{
					text:"已入库",
					url:"/pages/inemployees/hadTohouse/hadTohouse"
				},{
					text:"待处理",
					url:"/pages/inemployees/waitTodispose/waitTodispose"
				},{
					text:"待发货",
					url:"/pages/inemployees/waitTodelivery/waitTodelivery"
				},{
					text:"已发货",
					url:"/pages/inemployees/hadTodelivery/hadTodelivery"
				}],
				currentIndex:1
			}
		},
		onShow() {
			console.log("1")
		},
		methods: {
			changeIndex(index){
				this.currentIndex=index;
			}
		}
	}
</script>

<style scoped>
.bg{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #F1F1F1;
	z-index: -1;
}
.nav{
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-top:1rpx solid  #F1F1F1 ;
	background-color: #FFFFFF;
	padding: 0 20rpx;
	
}
.nav .item{
	width: 17%;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	position: relative;
}
.nav .item .text{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.bottom{
	position: absolute;
	left: 20%;
	top:80%;
	width: 60rpx;
	height: 6rpx;
	background: #F7CC46;
	border-radius: 3rpx;
}
.yellow{
	font-weight: 600;
	color: #F7CC46 !important;
}
.search{
	width: 100%;
	height: 100rpx;
	background: #FFFFFF;
	display: flex;
	align-items: center;
}
.search .image{
	margin-right: 15rpx;
}
.search .image image{
	width: 27rpx;
	height: 27rpx;
	vertical-align: center;
}
.search_wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70rpx;
	width: 90%;
	margin: auto;
	background: #FFFFFF;
	border: 1rpx solid #999999;
	border-radius: 30rpx;
}
</style>
